<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <product-search @search="reload"  />
      <el-card shadow="never">
        <!-- 数据表格 -->
        <ele-pro-table ref="table" row-key="productItemId" :columns="columns" :datasource="datasource" :default-expand-all="false" :need-page="true" @done="onDone">
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit({},'1')" >添加</el-button>
            <el-button size="small" icon="el-icon-upload2" class="ele-btn-icon" @click="reportexcel" >导出</el-button>
          </template>
          <template v-slot:img="{ row }">
            <img :src="row.imgUrl" min-width="50" height="50"/>
          </template>
          <!-- 标题列 -->
          <template slot="title" slot-scope="{ row }">
            <i :class="row.icon"></i> {{ row.name }}
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-plus"  @click="openEdit(row,'3')">添加规格</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row,'2')" >修改</el-link>
            <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(row)" >
              <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete" >删除</el-link>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <product-edit :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex" />
      <productitems-add :data="current" :visible.sync="showItemEdit" @done="reload" :btnindex="btnindex" />
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
    </div>
  </template>
  
  <script>
    import ProductEdit from './components/product-edit';
    import ProductSearch from './components/product-search';
    import ProductItemsAdd from './components/productitems-add';
    import ExportDialog from '@/components/Excel/ExportDialog';
    import { QueryProductViewByParams,DeleteProduct } from '@/api/productmanager/productmanager';
    export default {
      name: 'ProductManager',
      components: { 
        'product-edit':ProductEdit,
        'product-search':ProductSearch,
        'productitems-add':ProductItemsAdd,
        'ExportDialog':ExportDialog
      },
      data() {
        return {
          // 表格列配置
          columns: [
          { columnKey: 'index', type: 'index', width: 55, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号', },
          { prop: 'code', label: '产品编号', sortable: 'code', showOverflowTooltip: true, width: 120},
          { prop: 'name', label: '产品名称', sortable: 'name', showOverflowTooltip: true, },
          { prop: 'imgUrl', label: '缩略图', showOverflowTooltip: true, showOverflowTooltip: true,  width: 80,  slot: 'img' },
          { prop: 'categoriesName', label: '产品分类', showOverflowTooltip: true,width: 100,},
          { prop: 'brand', label: '品牌', showOverflowTooltip: true,width: 90},
          { prop: 'productItemName', label: '规格',  showOverflowTooltip: true, },
          { prop: 'price', label: '销售价', sortable: 'price', showOverflowTooltip: true,  width: 90},
          { prop: 'saleQty', label: '已售', sortable: 'saleQty', showOverflowTooltip: true, width: 90},
          { prop: 'stockQty', label: '库存', sortable: 'stockQty', showOverflowTooltip: true, width: 80,},
          { prop: 'unitDesc', label: '单位',  showOverflowTooltip: true,width: 60},
            { prop: 'createDate', label: '创建时间', showOverflowTooltip: true, align: 'center', sortable: 'createDate',width: 110,
              formatter: (row, column, cellValue) => {
                return this.$util.toDateString(cellValue,"YYYY-MM-DD");
              }
            },
            { prop: 'statusDesc', label: '状态', showOverflowTooltip: true, width: 80, align: 'center', sortable: 'statusDesc', },
            { columnKey: 'action', label: '操作', width: 220, align: 'center', resizable: false, slot: 'action', hideInSetting: true, showOverflowTooltip: true }
          ],
          // 当前编辑数据
          current: null,
          //操作按钮索引
          btnindex: '1',
          // 是否显示编辑弹窗
          showEdit: false,
          // 是否显示产品规格编辑弹窗
          showItemEdit: false,
          // 全部菜单数据
          menuList: [],
          // 导出列
          exportList: [
            { name: "产品编号", keys: "code", status: true },
            { name: "产品名称", keys: "name", status: true },
            { name: "缩略图", keys: "imgUrl", status: true },
            { name: "产品分类", keys: "categoriesName", status: true },
            { name: "品牌", keys: "brand", status: true },
            { name: "规格", keys: "productItemName", status: true },
            { name: "销售价", keys: "price", status: true },
            { name: "已售", keys: "saleQty", status: true },
            { name: "库存", keys: "stockQty", status: true },
            { name: "单位", keys: "unitDesc", status: true },
            { name: "创建时间", keys: "createDate", status: true },
            { name: "状态", keys: "statusDesc", status: true }
          ]
        };
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
  
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, },{ sort: "code", order: 0, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.order.sort,order:params.order.order=='asc'?0:1});
          }
          
          let data = await QueryProductViewByParams(params.where);
  
          return {
            list:data.items,
            count:data.totalrecords,
          };
        },
  
         /* 表格渲染完成回调 */
        onDone({ data }) {
          // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
          if(this.current) {
            Object.assign(this.current, data);
          }
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
         */
        openEdit(row,index) {
          this.current = null;
          this.current = row;
          this.btnindex = index;
          this.showEdit = index != '3';
          this.showItemEdit = index == '3';
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          DeleteProduct(row.productItemId)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        },
        /* 导出 */
        reportexcel(pams) {
           //初始化参数
          let params = {
            pagesize: 0,
            pageindex: 1,
            conditions: [],
            orderBys: [{ sort: "createDate", order: 1, }],
          };
          //加载进度条
          const loading = this.$loading({ lock: true });
          //重新请求查询
          this.$refs.table.doRequest(({ where }) => {
          if(where){
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QueryProductViewByParams(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true
              this.$refs.ExportDialog.checkList = this.exportList
              this.$refs.ExportDialog.titleName = "产品列表"
              this.$refs.ExportDialog.dataList = data;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
          });
        },
      }
    };
  </script>
  